<template>
    <theme-box title="商品字典添加">
        <form class="form-inline" @submit.prevent v-el:form>
            <div class="box-body">
                <form-select title="字典类型" name="dictType" id='dictType' :required="true" :options="dicOptions" :value.sync="typeValue"></form-select>
                <form-group title="上级字典" :required="true">
                    <select name="upperDictId" class="form-control" v-model="dictVal" style="width:265px;max-width: 265px">
                        <option v-for="type in typeList" :value="type.value">
                            {{type.key}}
                        </option>
                    </select>
                </form-group>
                <!--<form-group title="上级分类类型" :required="true">-->
                    <!--<select name="upperDictId" class="form-control">-->
                        <!--<option v-for="type in dictList">-->
                            <!--{{type.dictValue}}-->
                        <!--</option>-->
                    <!--</select>-->
                <!--</form-group>-->
                <form-input title="字典内容" :required="true" name="dictValue" :value.sync="dictValue"></form-input>
                <form-input title="分类描述" name="dictDsc"></form-input>
                <form-input title="分类ICO名" :required="true" name="icoName" id="name"></form-input>
                <form-input title="主分类顺序" :required="true" name="typeOrder" id="typeOrder" :read-only="typeValue == 1"></form-input>
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
                <v-button type="reset" @click="reset">重置</v-button>
                <v-button type="submit" theme="primary" class="pull-right">确认</v-button>
            </div>
            <!-- /.box-footer -->
        </form>
    </theme-box>
</template>

<script>
    import 'plugins/jquery-validation';
    import {
        dateTime
    } from 'ui/collections/general.js'
    var serialize = require('form-serialize');

    export default {
        data: () => ({
            typeList:[],
            dictList:[],
            dictVal:'',
            typeValue: "",
            type: false,
            dicOptions: [
                {key: "主分类", value: "0"},
                {key: "次分类", value: "1"}
            ],
        }),
        watch: {
            typeValue(v){
                $(this.$els.form.dictValue).rules("remove", "maxlength");
                if (v == "1") {
                    $(this.$els.form.dictValue).rules("add", {
                        maxlength: 5
                    });
                } else {
                    $(this.$els.form.dictValue).rules("add", {
                        maxlength: 20
                    });
                }
            },
            // dictVal(v){
            //     console.log(v)
            //     this.$post({
            //         url: "/api/v1" + projectName_Url + "/list/caterdict/"+v+"/0",
            //         method: "GET"
            //     }).then(response => {
            //         let list = response.content.info;
            //         this.$set("dictList", list)
            //     }, error => {
            //     });
            // }

        },
        methods: {
            reset() {
                let self = this;
                $("label.error").remove();
                $("#name").css("display", "");
                self.typeValue = 0;
                this.$els.form.reset()
            },
            typeFn(data) {
                let self = this;
                self.$post({
                    url: "/api/v1" + projectName_Url + "/list/caterdict/back_type/0",
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    self.$set("typeList", list)
                    self.dictVal = list[0].value
                }, error => {
                });
            }
        },

        ready() {
            dateTime()
            var self = this;
            self.typeFn();
            $(this.$els.form).validate({
                submitHandler: async function () {
                    var _data = serialize(this.currentForm, {
                        hash: true,
                        empty: true
                    });
                    var result = await self.$post({
                        url: "/api/v1" + projectName_Url + "/plat/dict/add",
                        data: _data
                    })
                    self.reset();
                    let data = {
                        title: "操作成功",
                        content: "是否进入商品列表查看?"
                    }
                    Midway.confirm(data).then(function () {
                        self.$route.router.go('/diningField/list');
                    })

                },
                errorPlacement: function (error, element) {
                    if (element.attr("name") == "file") {
                        error.insertAfter(".file-item");
                    } else {
                        error.insertAfter(element)
                    }
                },
                rules: {
                    dictDsc: {
                        stringMaxLength: 16
                    },
                    dictValue: {
                        required: true,
                        stringMaxLength: 20
                    },
                    icoName: {
                        required: true,
                        stringMaxLength: 8
                    },
                    typeOrder: {
                        int: true,
                        min: 1,
                        maxlength: 2
                    }
                },
            });

            if ($("#dictType").val() == 1) {
                $("#name").css("display", "none");
            }
            $("#dictType").change(function () {
                $("#typeOrder").attr("disabled", $(this).val() == 1).val("");
                if ($("#dictType").val() == 1) {
                    $("#typeOrder").css("display", "none");
                    $("#name").css("display", "none");

                } else {
                    $("#typeOrder").css("display", "");
                    $("#name").css("display", "");
                }
            })
        }
    }
</script>
